<script setup name="area-option">
const props = defineProps({
  value: {
    type: [
      String,
      Number,
    ],
    required: true,
  },
  name: {
    type: String,
    required: true,
  },
});

const emits = inject('emits');
const pushRecord = inject('pushRecord');

function onSelect() {
  emits('select', props.value);
  pushRecord(props.name);
}
</script>

<template>
  <div
    class="area-option"
    @click="onSelect"
  >
    <slot />
  </div>
</template>

<style lang="scss" scoped>
.area-option {
  padding: 4px;
  text-align: center;
  border-radius: 2px;
  box-sizing: border-box;

  &:hover {
    background-color: #f2f2f2;
  }
}
</style>
